<template>
	<view class="content">
		<uni-nav-bar shadow left-icon="left" :rightText="rightText" statusBar="true" title="询价单详情" @clickRight="tosign" @clickLeft="back" />
		<view class="item">
			<view class="code iconbox">
				询价信息<view class="icon iconfont icon-guanyu"></view>
			</view>
			<view class="list status">
				<text class="name">询价单状态</text>
				<text v-if="info.status=='await'">待询价</text>
				<text v-else-if="info.status=='have'">待报价</text>
				<text v-else-if="info.status=='completed'">审批中</text>
				<text v-else-if="info.status=='approval'">审批中</text>
				<text v-else-if="info.status=='passed'">已中标</text>
				<text v-else-if="info.status=='declined'">未中标</text>
			</view>
			<view v-for="(item,index) in info.offer_detail" :key="index"  v-if="info.is_quoted">
				<view class="list">
					<text class="name">车辆型号</text>
					<text>{{cartype[info.goods[index].vehicle_model-1]}}</text>
				</view>
				<view class="list">
					<text class="name">商品名称</text>
					<text>{{item.goods_name}}</text>
				</view>
				<view class="list">
					<text class="name">总数量</text>
					<text>{{(item.goods_num*1).toFixed(4)}}</text>
				</view>
				<view class="list">
					<text class="name">运输单价</text>
					<view class="sum">{{item.goods_price}}</view>
				</view>
				<view class="list">
					<text class="name">总金额</text>
					<view class="sum">{{item.goods_total_price}}</view>
				</view>
			</view>
			<view v-for="item in info.goods"   v-else>
				<view class="list">
					<text class="name">车辆类型</text>
					<text>{{cartype[item.vehicle_model-1]}}</text>
				</view>
				<view class="list">
					<text class="name">商品名称</text>
					<text>{{item.spu_name}}</text>
				</view>
				<view class="list">
					<text class="name">总数量</text>
					<text>{{(item.quantity*1).toFixed(4)}}</text>
				</view>
				<view class="list">
					<text class="name">运输单价</text>
					<input type="text" placeholder="请输入" placeholder-class="input-style" class="ipt"
						v-model="item.purchase_price" />
				</view>
				<view class="list">
					<text class="name">总金额</text>
					<view class="sum">{{(item.total_purchase_price=(item.quantity*item.purchase_price))}}</view>
				</view>
			</view>
			<view class="list">
				<text class="name">发货人</text>
				<text>{{info.consignee}}</text>
			</view>
			<view class="list">
				<text class="name">发货电话</text>
				<text>{{info.consignee_phone}}</text>
			</view>
			<view class="list">
				<text class="name">发货地址</text>
				<text>{{info.shipper_address}}</text>
			</view>
			<view class="list">
				<text class="name">收货人</text>
				<text>{{info.shipper}}</text>
			</view>
			<view class="list">
				<text class="name">收货电话</text>
				<text>{{info.shipper_phone}}</text>
			</view>
			<view class="list">
				<text class="name">收货地址</text>
				<text>{{info.consignee_address}}</text>
			</view>
		</view>
		<view class="item" v-if="filelist.length>0">
			<view class="code iconbox">
				报价文件<view class="icon iconfont icon-guanyu"></view>
			</view>
			<view class="file" v-for="(item,index) in filelist" :key='index'>
				<view class="url">{{item}}</view>
				<button class="btn" @tap="openurl(item)">查看</button>
			</view> 
		</view>
	</view>
</template>

<script setup>
	import {
		supplierOffer,
		inquiryInfo
	} from '../../network/inquiry.js';
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onLoad,
		onReady
	} from '@dcloudio/uni-app';
	const goodsList = reactive([])
	const info = reactive({})
	onLoad((res) => {
		getDetail(res.id)
	})
	const cartype = reactive(['平板车', '高栏车', '高地板', '厢式车', '面包车', '冷藏车', '飞翼车', '自卸车', '爬梯车', '集装箱', '大件牵引车', '低栏车'])
	const getDetail = (id) => {
		let data = {
			enquiry_id: id
		}
		inquiryInfo(data).then(res => {
			Object.assign(info, res.data.data)
			if(info.offer)Object.assign(filelist, JSON.parse(info.offer.attachment))
			if (info.status == 'approval' || info.status == 'declined' || info.status == 'passed') {
				rightText.value = ' '
			}
		})
	}
	const filelist = reactive([])
	const rightText = ref('我要报价')
	const tosign = () => {
		if (info.status == 'approval' || info.status == 'declined' || info.status == 'passed') {
			return
		}
		uni.navigateTo({
			url: './sign?id=' + info.id
		})
	}	
	const back = ()=>{
		uni.navigateBack({
			delta: 1
		})
	}
	const openurl = (url)=>{
		// #ifdef  APP-PLUS
		plus.runtime.openURL(url, function(res) {});
		// #endif
		
		//#ifndef  APP-PLUS		
		window.open(url)
		//#endif
	}
</script>

<style lang="scss">
	.time {
		margin-top: 2rpx;
		background-color: #fff;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
	}

	.item {
		margin: 20rpx 0;
		background-color: #fff;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		position: relative;

		.code {
			font-size: 32rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #333;
			font-weight: bold;
		}

		.iconbox {
			justify-content: flex-start;
			gap: 10rpx;

			.icon {
				font-size: 40rpx;
				color: #ff6700;
				font-weight: normal;
			}
		}

		.list {
			width: 100%;
			margin-top: 20rpx;
			font-size: 28rpx;
			color: #333;
			display: flex;
			align-items: center;
			gap: 50rpx;

			.name {
				display: inline-block;
				width: 140rpx;
				text-align: right;
			}

			.ipt {
				font-size: 28rpx;
				border: 2rpx solid #999;
				padding: 6rpx;
				border-radius: 6rpx;
				width: 300rpx;
			}

			.sum {
				font-size: 28rpx;
				border: 2rpx solid #999;
				padding: 6rpx;
				border-radius: 6rpx;
				width: 300rpx;
				height: 40rpx;
			}
		}

		.goodslist {
			width: 100%;
			margin-top: 20rpx;
			font-size: 28rpx;
			line-height: 40rpx;
			padding-left: 10rpx;
			box-sizing: border-box;
			color: #333;
			display: flex;
			justify-content: space-between;
			position: relative;

			.name {
				width: 180rpx;
				text-align: right;
				text-align: center;
			}

			.icon {
				position: absolute;
				left: -20rpx;
			}
		}
		.file{
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 10rpx 0;
			.url{
				width: 520rpx;
				font-size: 24rpx;
				color: #f6bf00;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.btn{
				width: 120rpx;
				height: 60rpx;
				font-size: 24rpx;
				line-height: 60rpx;
				text-align: center;
				background-color: #f6bf00;
				margin: 0;
			}
		}
	}

	.btnbox {
		display: flex;
		justify-content: center;
		padding: 60rpx 0;
		gap: 30rpx;

		.btn {
			background-color: #f6bf00;
			padding: 0;
			color: #333;
			font-size: 28rpx;
			height: 60rpx;
			width: 200rpx;
			line-height: 60rpx;
			margin: 0;
		}

		.back {
			display: inline-block;
			background-color: #fff;
			text-align: center;
			border-radius: 10rpx;
		}
	}
</style>